<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <style>
        .ball {
            width: 30px;
            height: 30px;
            background: red;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="button" value="加入购物车" @click='ball=!ball'>
    <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter">
        <div class="ball" v-if="ball"></div>
    </transition>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data() {
            return {
                ball: false
            }
        },
        methods: {
            // 动画钩子函数第一个参数：el，表示要执行动画的那个dom元素，是个原生的js dom对象
            // 大家可以认为 el是通过document.getElementById()的方式获得的
            beforeEnter(el){
                // 设置小球起始位置
                el.style.transform="translate(0,0)"
            },
            enter(el,done){
                el.offsetWidth;//这句话没有实际效果，如果不写动画效果出不来
                el.style.transform="translate(150px,400px)";
                el.style.transition='all 1s ease';

                //这里的done就是afterEnter这个函数，也就是说done是afterEnter函数的应用
                done()
            },
            afterEnter(el){
                // el.style.transform="translate(0,0)"
                this.ball=!this.ball
            }
        }
    });
</script>
</body>
</html>